<script setup>
import { ref } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import {reqClientGroup} from '@/api'
import custormerDrawer from '@/pages/wework/groupManagement/component/custormerDrawer.vue'
const tabList = ref([])
const custormerDrawerRef =ref(null)
const show =async (id) =>{
	const r = await reqClientGroup({external_userid:id})
	if (r) {
		tabList.value = r.data
	}
}
const drawer = ref(false)
const rowClick = (row, column, event) => {
	drawer.value = true
	custormerDrawerRef.value.show(row.chat_id)
}
const changeDrawer = (visible) => {
	drawer.value = visible
}
defineExpose({
	show
})
</script>
<template>
	<div class="customer-detail-statistic">
		<el-table :data="tabList" style="width: 100%">
			<el-table-column fixed label="群名称" width="180">
				<template #default="scope">
					<div class="owner-name app-flex-left">
						<img
							class="owner-img"
							src="../../../../../assets/img/img/avatar-room-default.67bead38e751.svg"
							alt=""
						/>
						<span style="margin-left: 10px">{{ scope.row.name }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="群主" width="180">
				<template #default="scope">
				<div class="app-flex-left">
					<span class="owner-name gray-broder11">
						<el-icon><UserFilled class="people-icon" /></el-icon>
						<span style="margin-left: 5px">{{ scope.row.staff_name }}</span>
					</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column property="group_number" label="群人数" width="120" />
			<el-table-column property="join_time" label="客户入群时间" width="120" />
	 <el-table-column label="状态" width="180">
				<template #default="scope">
				<el-tag>{{scope.row.status==1?'我已在群聊中':'我不在群聊中' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
						<span class="app-primary-font app-pointer" @click="rowClick(scope.row)">详情</span>
					</template>
			</el-table-column>
			<template #empty>
				<div class="empty-box">
					<img
						class="empty-img"
						src="../../../../../assets/img/img/list-empty.499dbb25961c.png"
						style="width: 136px"
						alt=""
					/>
					<div class="empty-description">还没有已加入的群聊哦~</div>
				</div>
			</template>
		</el-table>
		 <custormerDrawer ref="custormerDrawerRef" :drawer="drawer" @changeDrawer="changeDrawer" />
	</div>
</template>
<style lang="scss" scoped>
	.owner-name {
		display: flex;
		align-items: center;
		// padding: 3px 7px;

		.people-icon {
			color: #7ea4d1;
		}
		.owner-img {
			width: 36px;
			height: 36px;
		}
		// width: 58px;
		// height: 28px;
	}
	.gray-broder11 {
		// width: 68px;
		// display: flex;
		height: 28px;
		padding: 3px 7px;
		border: 1px solid #d9d9d9;
		border-radius: 2px;
		font-size: 13px;
	}
.customer-detail-statistic {
	position: relative;
	width: 100%;
	height: 392px;
	padding: 0 24px;
	.record-seat-tip-wrap {
		position: absolute;
		top: 12px;
		left: 24px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 48px);
		min-height: 36px;
		padding: 8px 16px;
		margin: 0;
		background-color: #f1f9ff;
		color: #595959;
		font-size: 14px;
		.ame-alert-icon {
			font-size: 15px;
			margin-right: 8px;
			color: #1890ff;
		}
		.tip-text {
			display: flex;
			align-items: center;
		}
	}
	.empty-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		.empty-description {
			margin-top: 16px;
			font-size: 14px;
			color: #000000a6;
		}
	}
}
</style>
